<template>
  <el-pagination
    v-if="pager.total > pager.size"
    :total="pager.total"
    :current-page="pager.current"
    :page-size="pager.size"
    :layout="layout"
    class="page"
    @current-change="updatePager"
    @size-change="updateSize"
  />
</template>

<script>
export default {
  name: 'Pager',
  props: {
    pager: {
      type: Object,
      default() {
        return {
          total: {
            type: [String, Number],
            default: 0,
          },
          current: {
            type: [String, Number],
            default: 1,
          },
          size: {
            type: [Number],
            default: 20,
          },
        };
      },
    },
    layout: {
      type: String,
      default: () => 'total, sizes, prev, pager, next',
    },
  },
  emits: ['updatePager'],
  setup(props, { emit }) {
    const updatePager = (current) => {
      const pagerParams = {
        ...props.pager,
        current,
      };

      emit('updatePager', pagerParams);
    };

    const updateSize = (size) => {
      const pagerParams = {
        ...props.pager,
        current: 1,
        size,
      };

      emit('updatePager', pagerParams);
    };

    return {
      updatePager,
      updateSize,
    };
  },
};
</script>

<style lang="less" scoped>
.page {
  text-align: right;
  padding: 12px 0;
}
</style>
